import React, {Component} from 'react';
import {Table, message, Button, Modal} from 'antd';
import ajax from '../../util/AjaxUtil';
import './MenuManagement.less';
import EditMenu from './EditMenu';
import menuStore from './store/index';
import qs from "qs";

class MenuManagement extends Component {

    constructor(props) {
        super(props);

        this.state = menuStore.getState();

        this.rowActionRender = this.rowActionRender.bind(this);
    }

    render() {
        let columns = [{
            title: '菜单名称',
            dataIndex: 'name',
            key: 'name',
        }, {
            title: '菜单id',
            dataIndex: 'id',
            key: 'id',
        }, {
            title: '菜单类型',
            dataIndex: 'type',
            key: 'type',
            render: (record) => {
                if (record === 0) {
                    return '菜单';
                } else if (record === 1) {
                    return '资源';
                }
            }
        }, {
            title: '图标类名',
            dataIndex: 'icon',
            key: 'icon'
        }, {
            title: '父类菜单id',
            dataIndex: 'prentId',
            key: 'prentId'
        }, {
            title: '前端组件名',
            dataIndex: 'component',
            key: 'component'
        }, {
            title: '操作',
            dataIndex: 'action',
            render: this.rowActionRender
        }];
        return (
            <div>
                <Table
                    columns={columns}
                    dataSource={this.state.menuTableData}
                    size={"small"}
                    pagination={false}
                    rowKey={this.roeKey}
                    defaultExpandedRowKeys={[28]}
                    loading={this.state.isLoading}
                />
            </div>
        )
    }

    roeKey(record) {
        return record.id;
    }

    rowActionRender(text, record, index) {
        return (
            <div>
                <Button onClick={this.addMenuClick.bind(this, record, "add")}
                        className={"action_btn"}
                        type="primary"
                        icon="plus"
                        size="small"
                        ghost>添加</Button>
                <Button
                    onClick={this.addMenuClick.bind(this, record, "edit")}
                    className={"action_btn"}
                    type="primary"
                    icon="edit"
                    size="small"
                    ghost>修改</Button>
                <Button
                    onClick={this.addMenuClick.bind(this, record, "delete")}
                    className={"action_btn"}
                    type="danger"
                    icon="delete"
                    size="small"
                    ghost>删除</Button>
            </div>
        )
    }

    componentDidMount() {
        this.setState({isLoading: true});
        ajax.post("/userCenter/menu/getTreeData").then((resource) => {
            this.setState({
                isLoading: false,
                menuTableData: resource.data.children,
                loading: this.state.isLoading
            });
        }).catch((error) => {
            this.setState({isLoading: false});
            message.error("获取数据失败")
        });
    }

    addMenuClick(record, action) {
        if (action === 'add') {
            Modal.confirm({
                okText: '添加',
                cancelText: '取消',
                content: <EditMenu record={record} action={action} menuTree={this.state.menuTableData}/>,
                iconType: 'plus',
                title: '添加子菜单',
                width: '60vw',
                onOk: (close) => {
                    menuStore.getState().editMenuForm.validateFields((errors, values) => {
                        if (!errors) {
                            //提交数据
                            ajax.post("/userCenter/menu/create", qs.stringify(values))
                                .then((resource) => {
                                    if (resource) {
                                        message.success("添加菜单成功");
                                        close();
                                        this.componentDidMount();
                                    } else {
                                        message.error("添加菜单失败");
                                    }
                                })
                                .catch((error) => {
                                    message.error("添加菜单失败");
                                });
                        }
                    });

                }
            });
        } else if (action === 'edit') {
            Modal.confirm({
                okText: '修改',
                cancelText: '取消',
                content: <EditMenu record={record} action={action} menuTree={this.state.menuTableData}/>,
                iconType: 'edit',
                title: '修改菜单',
                width: '60vw',
                onOk: (close) => {
                    menuStore.getState().editMenuForm.validateFields((errors, values) => {
                        if (!errors) {
                            values.id = record.id;
                            //提交数据
                            ajax.post("/userCenter/menu/update", qs.stringify(values))
                                .then((resource) => {
                                    if (resource) {
                                        message.success("修改菜单成功");
                                        close();
                                        this.componentDidMount();
                                    } else {
                                        message.error("修改菜单失败");
                                    }
                                })
                                .catch((error) => {
                                    message.error("修改菜单失败");
                                });
                        }
                    });

                }
            });
        } else if (action === 'delete') {
            Modal.confirm({
                okText: '删除',
                cancelText: '取消',
                content: '是否删除菜单\''+record.name+'\'?',
                iconType: 'delete',
                title: '删除菜单',
                onOk: (close) => {
                    //提交数据
                    ajax.post("/userCenter/menu/delete", qs.stringify({id:record.id}))
                        .then((resource) => {
                            if (resource) {
                                message.success("删除菜单成功");
                                close();
                                this.componentDidMount();
                            } else {
                                message.error("删除菜单失败");
                            }
                        })
                        .catch((error) => {
                            message.error("删除菜单失败");
                        })
                }
            });
        }

    }
}


export default MenuManagement;